<template>
    <div>
        <a href="javascript:void(0);" class="weui_panel_ft">
            <span></span>
            <span>热门产品</span>
            <span>
                <router-link to="/home/hot">查看更多</router-link>
                <i></i>
            </span>
        </a>
        <div class="productBox">
            <router-link class="productItem" to="/home/hot/detail">
                <div class="weui_panel weui_panel_access">
                    <div class="weui_panel_bd">
                        <div class="weui_media_box weui_media_text">
                            <div class="img_box">
                                <img src="/src/assets/img/home/hot/59841e954cde9.jpg" />
                            </div>
                            <h4 class="weui_media_title">产品1</h4>
                            <p class="weui_media_desc">产品1描述</p>
                        </div>
                    </div>
                </div>
            </router-link>
            <router-link class="productItem" to="/home/hot/detail">
                <div class="weui_panel weui_panel_access">
                    <div class="weui_panel_bd">
                        <div class="weui_media_box weui_media_text">
                            <div class="img_box">
                                <img src="/src/assets/img/home/hot/59841e954cde9.jpg" />
                            </div>
                            <h4 class="weui_media_title">产品1</h4>
                            <p class="weui_media_desc">产品1描述</p>
                        </div>
                    </div>
                </div>
            </router-link>
            <router-link class="productItem" to="/home/hot/detail">
                <div class="weui_panel weui_panel_access">
                    <div class="weui_panel_bd">
                        <div class="weui_media_box weui_media_text">
                            <div class="img_box">
                                <img src="/src/assets/img/home/hot/59841e954cde9.jpg" />
                            </div>
                            <h4 class="weui_media_title">产品3</h4>
                            <p class="weui_media_desc">产品3描述</p>
                        </div>
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>
<script>
import List from './List.vue'
export default {
    components: {
        List
    }
}
</script>
<style scoped>
* {
    color: #333;
    padding: 0;
}
.weui-flex {
    padding: 0 .25rem
}
.weui_panel {
    padding: 0.5rem;
    background: #FFF;
    margin-bottom: .5rem;
}
.weui_media_desc {
    font-size: 0.5rem;
}
.weui_panel_ft {
    height: 1.4rem;
    font-size: 0.6rem;
    display: flex;
    flex-direction: row;
    background: #f7f7f7;
    padding: 0 .5rem;
}
.weui_panel_ft span:nth-child(1) {
    flex: 1;
    background: url(/src/assets/img/public/ellipse-1.png) no-repeat center center;
    background-size: 50%;
}
.weui_panel_ft span:nth-child(2) {
    flex: 3;
    font-size: .8rem;
    line-height: 1.4rem;
    color: #333;
}
.weui_panel_ft span:nth-child(3) {
    font-size: .7rem;
    flex: 10;
    text-align: right;
    color: #999;
    line-height: 1.4rem;
}
.weui_panel_ft span:nth-child(3) i {
    display: inline-block;
    width: .6rem;
    height: 100%;
    vertical-align: middle;
    background: url(/src/assets/img/public/jiantou.png) no-repeat center center;
    background-size: 45%;
}
.img_box {
    width: 100%;
}
.img_box img {
    width: 100%;
    height: 120px;
}
.weui_media_text p {
    color: #999;
}
.weui-flex__item {
    border-radius: .5rem;
}
.weui-flex__item:nth-child(1) {
    margin-right: .5rem;
}
.weui_media_title {
    font-size: .7rem;
}
.productBox{
    background: #F5F5F5;
    padding: 0 .5rem 0 .5rem
}
.productItem{
    margin-bottom: .5rem;
}
</style>

